<template>
  <VanNavBar title="回信">
    <template #right>
      <van-popover v-model:show="showPopover" placement="bottom-end" :offset="[8, 8]" :actions="actions" theme="dark" @select="onSelect">
        <template #reference>
          <VanIcon name="add-o" size="20" style="color: #333" />
        </template>
      </van-popover>
    </template>
  </VanNavBar>
  <VanSearch v-model="value" placeholder="请输入搜索关键词" />
  <!-- <VanNoticeBar left-icon="volume-o" text="无论到何时，我都想要和你在一起，不想遗憾一生，在自己的loft里，给你做做饭，抱着你看看电影，一起唱唱歌，再无其他。" /> -->
  <VanNoticeBar
    left-icon="volume-o"
    text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
  />
  <!-- 好友列表 -->
  <div class="list">
    <ul v-if="!showList">
      <li class="item" v-for="(item, index) in getMyfriendsList" :key="index" @click="toDetailPageFun(item)">
        <div class="leftAvatar">
          <nut-badge :value="8" right="12">
            <img :src="item.avatar" alt="" />
          </nut-badge>
        </div>
        <div class="right">
          <div class="top">
            <p class="name">{{ item.nickname }}</p>
            <p class="timer">昨天 下午14:22</p>
          </div>
          <div class="desc"> 程序员如何在朋友圈优雅的装逼，你可以说一说吗 </div>
        </div>
      </li>
    </ul>
    <div class="empty" v-if="showList">
      <nut-empty description="您还没有好友~" />
    </div>
  </div>
</template>

<script lang="ts" setup name="HomePage">
  import fetchApi from '/@/api/user/index';
  import router from '/@/router';
  const showPopover = ref(false);
  const actions = [
    { text: '发起群聊', icon: 'friends', type: 1 },
    { text: '添加朋友', icon: 'add', type: 2 },
    { text: '扫一扫', icon: 'enlarge', type: 3 },
    { text: '收付款', icon: 'wechat-pay', type: 4 },
  ];
  const onSelect = (action: { type: number; text: any }) => {
    switch (action.type) {
      case 2:
        router.push({ path: '/addfriend' });
        break;

      default:
        break;
    }
  };
  const showList = ref(false);
  const value = ref('');
  /**
   * 获取我的好友列表 fetchApi.getMyfriends
   */
  let getMyfriendsList: any = ref([]);
  const getMyfriendsFun = async () => {
    const res = await fetchApi.getMyfriends();
    if (res) {
      getMyfriendsList.value = res.data;
      if (res.data.length == 0) {
        showList.value = true;
      }
    }
  };
  /** 跳转到详情聊天页面 */
  const toDetailPageFun = (item: { _id: string; nickname: string }) => {
    router.push(`/wxchatDetail/${item._id}?nickname=${item.nickname}`);
  };
  onBeforeMount(() => {
    getMyfriendsFun();
  });
</script>
<style lang="scss" scoped>
  .list {
    padding: 20px;
    box-sizing: border-box;

    .item {
      display: flex;
      margin-bottom: 24px;

      .leftAvatar {
        width: 90px;
        height: 90px;
        margin-right: 20px;

        img {
          width: 90px;
          height: 90px;
          border-radius: 6px;
        }
      }

      .right {
        flex: 1;
        border-bottom: 1px solid #eee;
        padding-top: 5px;

        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .name {
            font-size: 28px;
            color: #333;
            font-weight: bold;
          }

          .timer {
            font-size: 20px;
            color: #666;
            font-weight: 300;
          }
        }

        .desc {
          font-size: 24px;
          line-height: 50px;
          color: #666;
          width: 80%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          padding: 5px 0 12px 0;
        }
      }
    }
  }
</style>
